<#assign ctx = "${request.contextPath}">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>网页实时视频 - 示例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/lib/ckplayer/player.js"></script>
<style type="text/css">.player{width: 100%; height: 300px;}</style>
</head>
<body>
<div class="container">
<div class="row">
	<div class="col-xs-12 col-md-offset-3 col-md-6">
		<div id="player" class="player"></div>
	</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-3 col-md-6">
<div class="panel panel-default">
   <div class="panel-body">
   <span id="error"></span>
   <form class="form-horizontal">
  		<div class="form-group">
			<div class="col-sm-4">
				<input id="devKey" type="text" class="form-control" placeholder="devKey" value="cd15d1aba85346128811ae17fc2a2378"/>
			</div>
			<div class="col-sm-4">
				<input id="devSecret" type="text" class="form-control" placeholder="devSecret" value="a7866ef45d594ea988554fe633fa987e"/>
			</div>
			<div class="col-sm-4">
				<input id="uuid" type="text" class="form-control" placeholder="uuid" value="983135884798102"/>
			</div>
  		</div>
  		<div class="form-group">
	  		<div class="col-sm-8">
				<input id="startCmd" type="text" class="form-control" placeholder="默认开始指令: 256" disabled="disabled"/>
			</div>
			<div class="col-sm-4">
				<button id="start" type="button" class="btn btn-primary">开始</button>
			</div>
  		</div>
  		<div class="form-group">
	  		<div class="col-sm-8">
				<input id="switchCameraCmd" type="text" class="form-control" placeholder="默认切换摄像头指令: 263"  disabled="disabled"/>
			</div>
			<div class="col-sm-4">
				<button id="switchCamera" type="button" class="btn btn-success">切换摄像头</button>
			</div>
  		</div>
  		<div class="form-group">
	  		<div class="col-sm-8">
				<input id="stopCmd" type="text" class="form-control" placeholder="默认停止指令: 257" disabled="disabled"/>
			</div>
			<div class="col-sm-4">
				<button id="stop" type="button" class="btn btn-danger">停止</button>
			</div>
  		</div>
   </form>
   </div>
</div>
</div>
</div>
</div>
<script>
var rtvHost = '${ctx}'; // 实时视频服务器主机地址
//var rtmpHost = 'rtmp://120.77.206.70/live/stream';
var rtmpHost = 'rtmp://172.16.5.22/live/stream';
var appid = new Date().getTime();
var isw = 3;

function assembleUrl(cmd){
	 var url = rtvHost + '/api?'
			 + "ver=2"
			 + "&method=sendInstruction"
			 + "&devKey=" + $('#devKey').val()
			 + "&devSecret=" + $('#devSecret').val()
			 + "&uuid=" + $('#uuid').val()
			 + "&proNo=128"
			 + "&for=web"
			 + "&cmd="+cmd
			 + "&isw=" + isw
			 + "&appId=" + appid;
	 return encodeURI(url);
}
/**
 * 发送指令
 */
function sendInstruction(cmd, buttonId){
	createPlayer('player', rtmpHost);
	lockButton(buttonId);
	$.ajax({ 
        type: "GET", 
        url : assembleUrl(cmd),            
        async: false, 
        success: function(obj) {
        	if (0 == obj.code){
	 			var data = obj.data;
	 			var contentJsonString = obj.data.content;
	 			var content = JSON.parse(contentJsonString);
	 			var code = content.code;
	 			if(code != null && code != undefined){
	 				var pullUrl;
	 				if(code == 259 || code == 0){//播放 or 切换摄像头指令
	 					pullUrl = data.pullURL + data.token;
	 					sendHeartBeat();
	 				}else if(code == 260){//停止播放指令
	 					pullUrl = rtmpHost;
	 					stopHeartBeat();
	 				}
	 			}
	 			createPlayer('player', pullUrl);
	 		 }else{
	 			$('#error').html('<div class="alert alert-danger"> ' + obj.msg + ' </div>');
	 		 }
        	unlockButton(buttonId);
        },
        error: function(e){
        	console.log("异常：" + e);
        	unlockButton("start");
        }

    });
}

/**
 * 心跳
 */
function heartbeat(){
	$.ajax({ 
	    type: "GET", 
	    url : assembleUrl("heartbeat"),            
	    async: false, 
	    success: function(obj) {
	    	console.log("发送心跳：" + JSON.stringify(obj));
	    },
	    error: function(e){
	    	console.log("异常：" + e);
	    	unlockButton("start");
	    }
	
	});
}

var time;
function sendHeartBeat(){
	time = setInterval(heartbeat,5000);
}

function stopHeartBeat(){
	clearInterval(time);
}

function callback(a, b){
	console.dir(a);
	console.dir(b);
}
function createPlayer(containerId, videoUrl){
	var options = {id:containerId, source:videoUrl};
	new JIMIPlayer(options, function (player, id){
		player.addListener('error', 'callback');
	});
}
function start(){
	var cmd = "{\"cmd\":" + 256 + ",\"appid\":\"" + appid + "\"}";
 	//sendInstruction(cmd, "start");
	$.ajax({ 
	    type: "GET", 
	      url:'http://120.77.206.70/srs-os/jsonpApi?ver=2&method=getServerIp', 
	      dataType:'jsonp', 
	      jsonp:"callback", 
	      jsonpCallback: 'handleResponse', //设置回调函数名
	      success:function (data) { 
	        alert(data.data.serverIp); 
	      }, 
	      error:function (err) { 
	        alert('出现错误了!!!'); 
	      } 
	});
}
function switchCamera(){
	var cmd = "{\"cmd\":263,\"appid\":\""+appid+"\",\"code\":\"001\",\"id\":\"" +$('#uuid').val() + "\"}"
 	sendInstruction(cmd, "switchCamera");
}
function stop(){
	var cmd = "{\"cmd\":" + 257 + ",\"appid\":\"" + appid + "\"}";
 	sendInstruction(cmd, "stop");
}

function lockButton(id){
	$("#" + id).attr("disabled","disabled");
}

function unlockButton(id){
	$("#" + id).removeAttr("disabled");
}


$(function (){
	createPlayer('player', 'rtmp://120.77.206.70/live/stream');
// 	createPlayer('player'); // 空白占位视频
	$('#start').click(start);
	$('#switchCamera').click(switchCamera);
	$('#stop').click(stop);
});
</script>
</body>
</html>